<template>
    <div>
        <el-dialog
            title="选择商品——请选择搜索商品，然后从搜索结果中选择需要的商品"
            :visible.sync="dialogVisible"
            width="800"
            :close-on-press-escape='false'
            :close-on-click-modal='false'
            :show-close='false'>
            <!-- 搜索商品 -->
            <div class="f-s" style="margin: 10px;" @keyup.enter="search">
                <span style="">搜索关键字：</span>
                <el-input style="flex:1" v-model='queryForm.keyword'  clearable>
                    <o-select slot="prepend" code='productKeywords' v-model='queryForm.search_type' :lazy='false'></o-select>
                </el-input>
                <el-button type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
            </div>
            <el-table
                :data="searchResult"
                stripe
                border
                :max-height='200'
                :header-cell-style="TABLE_HEADER_CELL_STYLE">
                <el-table-column prop='id' label='商品编号' width="120"></el-table-column>
                <el-table-column prop='title' label='商品名称'></el-table-column>
                <el-table-column prop='type_name' label='产品图片' width="80">
                    <template v-slot='scope'>
                        <el-image 
                            style="width: 50px; height: 50px"
                            :src="scope.row.img_url" 
                            :preview-src-list="[scope.row.img_url]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label='操作' width="120">
                    <template v-slot='scope'>
                        <el-button type='text' @click='selectProduct(scope.row)'>选择商品</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 已选商品 -->
            <h1 class="title" style="margin-top : 10px;">已选<span class="red-text">{{selectList.length}}</span>件商品</h1>
            <el-table
                :data="selectList"
                stripe
                border
                :max-height='200'
                :header-cell-style="TABLE_HEADER_CELL_STYLE">
                <el-table-column prop='id' label='商品编号' width="120"></el-table-column>
                <el-table-column prop='title' label='商品名称'></el-table-column>
                <el-table-column prop='type_name' label='产品图片' width="80">
                    <template v-slot='scope'>
                        <el-image 
                            style="width: 50px; height: 50px"
                            :src="scope.row.img_url" 
                            :preview-src-list="[scope.row.img_url]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label='操作' width="120">
                    <template v-slot='scope'>
                        <el-button type='text' @click='deleteProduct(scope.row)'>取消该商品</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {toast} from '@u';
    export default {
        data () {
            return {
                dialogVisible : false,
                queryForm : {
                    page : 1,
                    limit : 10,
                    keyword : null,//搜索关键字
                    search_type : 'title'
                },
                searchResult : [],//搜索结果
                selectList : [],//已选商品
                //可传入的配置选项
                options : {
                    success : null,//成功回调
                }
            }
        },
        methods : {
            doShow (options) {
                this.dialogVisible = true;
                this.options = options || {};
            },
            doClose () {
                if (!this.selectList.length) {
                    toast('未选择任何商品，关闭请点击【取消】按钮', 'error');
                    return;
                }
                this.dialogVisible = false;
                this.options.success && this.options.success([...this.selectList]);
            },
            //搜索商品
            search () {
                if (!this.queryForm.search_type) {
                    toast('请选择搜索类型', 'error');
                    return;
                }
                if (!this.queryForm.keyword) {
                    toast('请输入商品名称', 'error');
                    return;
                }

                this.__api.commodity.productList(this.queryForm).then(res => {

                    this.searchResult = res.data;
                })
            },
            //选择商品
            selectProduct (row) {
                if (this.selectList.some(v => v.id === row.id)) {
                    toast('该商品已在商品列表中', 'error')
                    return;
                }
                this.selectList = [...this.selectList, {...row}]
            },
            //从选中删除
            deleteProduct (row) {
                this.selectList = this.selectList.filter(v => v.id != row.id)
            }
        }
    }
</script>

<style lang='less' scoped>
    .title {
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>